<template>
	<div class="page">
		<div class="record_container_tab flex j-center">
			<div class="item" :class="{'on':active==0}" @click="tab(0)">待发放</div>
			<div class="item" :class="{'on':active==1}" @click="tab(1)">已发放</div>
			<div class="item" :class="{'on':active==2}" @click="tab(2)">已取消</div>
		</div>
		<div class="record_container_body">
			<div class="scroll" v-if="list.length">
				<template v-if="active==0">
					<div class="item flex a-center" v-for="item in list">
						<div class="avatar"><img src="https://gd-hbimg.huaban.com/20c730e221a0fe58ba7445735ecb0f5e181ee486246315-A5WfqX_fw658"></div>
						<div class="bonus on">
							<h4>塔克飞机积木</h4>
							<p>20积分</p>
						</div>
						<div class="count">
							<p>数量×1</p>
						</div>
						<div class="r_button disabled">取消</div>
					</div>
				</template>
				<template v-else-if="active==1">
					<div class="item flex a-center" v-for="item in list">
						<div class="avatar"><img src="https://gd-hbimg.huaban.com/20c730e221a0fe58ba7445735ecb0f5e181ee486246315-A5WfqX_fw658"></div>
						<div class="record_info">
							<h4>塔克飞机积木</h4>
							<div class="record_info_item flex jlr">
								<span>数量*1</span>
								<span>12/12 17:21:24</span>
							</div>
							<div class="record_info_item flex jlr">
								<span class="jf">20积分</span>
								<span>兑换老师：美术一班李老师</span>
							</div>
						</div>
					</div>
				</template>
				<template v-else>
					<div class="item flex a-center" v-for="item in list">
						<div class="avatar"><img src="https://gd-hbimg.huaban.com/20c730e221a0fe58ba7445735ecb0f5e181ee486246315-A5WfqX_fw658"></div>
						<div class="record_info">
							<h4>塔克飞机积木</h4>
							<div class="record_info_item flex jlr">
								<span>数量*1</span>
								<span>12/12 17:21:24</span>
							</div>
							<div class="record_info_item flex jlr">
								<span class="jf">20积分</span>
								<span>兑换老师：美术一班李老师</span>
							</div>
						</div>
					</div>
				</template>
			</div>
			<div class="empty flex col a-center j-center">
				<div class="icon"></div>
				<div class="text">暂无记录</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			list:[1,2,3,4,5],
			active:0
		}
	},
	methods:{
		tab(i){
			this.active = i
		}
	}
}
</script>

<style scoped lang="scss">
	@import url('./style.css');
</style>